<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-row class="search-input">
          <el-form-item prop="name" label="文件名称：">
            <el-input v-model="filters.name" placeholder="文件名称"></el-input>
          </el-form-item>
          <el-form-item prop="createTime" label="创建时间：">
            <el-input v-model="filters.createTime" placeholder="创建时间"></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
          <kt-button
            icon="fa fa-search"
            :label="$t('action.search')"
            type="primary"
            @click="findPage(null)"
          />
        </el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-refresh"
            :label="$t('action.reset')"
            type="primary"
            @click="resetForm('filters')"
          />
        </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :highlightCurrentRow="true"
      :content="pageResult"
      :totalSize="totalSize"
      :columns="filterColumns"
      :showSelection="false"
      :showBatchDelete="false"
      @findPage="findPage"
      :showDeleteOperation="false"
      :showEditOperation="false"
      :showDaloadOperation="true"
      @handleDaload="handleDaload"
      ref="CyTable"
    ></cy-table>
    <div style="text-align: center">
      <el-button :size="size" @click="goBack" type="info" style="width: 200px">返回</el-button>
    </div>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/ProductTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";

export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      filters: {
        name: ""
      },
      columns: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: [],
      totalSize: 0
    };
  },

  methods: {
    //下载
    handleDaload: function(param) {
      if (param.row.url != "" && param.row.url != null) {
        window.open(param.row.url);
      }
    },
    // 获取分页数据
    findPage: function(params) {
      let this_ = this;
      if (params == undefined || params == null) {
        params = {
          pageNum: this_.pageRequest.pageNum,
          pageSize: this_.pageRequest.pageSize
        };
      }
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = params.pageNum;
      this_.filters.limit = params.pageSize;
      this.utils.request.queryProductUploadHistory(this_.filters, function(
        res
      ) {
        if (res.data.rows == null) {
          res.data.rows = [];
        }
        this_.pageResult = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },
    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [
        { prop: "name", label: "文件名称", minWidth: 120 },
        { prop: "total", label: "处理数量", minWidth: 120 },
        { prop: "successTotal", label: "处理成功数量", minWidth: 120 },
        { prop: "failTotal", label: "处理失败数量", minWidth: 120 },
        { prop: "createTime", label: "创建时间", minWidth: 120 },
        { prop: "creatorName", label: "创建人", minWidth: 120 }
      ];
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    //返回批量新增
    goBack: function() {
      this.$router.push({
        path: "/BatchAddProduct/" + ""
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.findPage();
    }
  },
  mounted() {
    this.initColumns();
  }
};
</script>

<style scoped lang='scss'>

// /deep/  .el-input__inner   {
//   width: 200px !important;
// }
</style>
